Angular is a platform and framework for building single-page applications using HTML and TypeScript. TypeScript is a primary language for Angular application development. It is a super set of JavaScript and is strongly typed, object oriented and compiled language. Angular uses HTML as a template language and its syntax can be extended to build application’s components quickly As a platform, Angular includes a component-based framework for building scalable web applications a collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and a suite of developer tools to help you develop, build, test, and update your code.

Learning Outcomes

Study Resources

Web Articles and Blogs

Video Lessons

Class Lecture

Exercises

Before-Class Exercises

(UNLESS specifically directed by your instructor)
DO NOT DISREGARD THIS MESSAGE:

Given the latest updates to the Angular platform, we are ONLY going to be supporting projects and tutorial completions created through:
--no-standalone mode

To that end you need to make sure you have installed and are working with Angular version 20. This will not only save you from future issues but also allow for everyone to be in better synchronicity with each other. As always teams must confirm that their software versions comply with requirements as stated by their stakeholders.

Setup Angular - individual
- Unless otherwise requested, you need to use ng new --no-standalone tour-of-heroes
  Make sure to take all defaults by pressing [ENTER] and do so also for your team project.
- Follow the instructions under Angular Setup to set up Angular on your PC. Follow all the steps up to and including Run the application.
- Verify that you can start the sample application.
- Take a screenshot of the running application and deposit the image in the myCourses dropbox, Setup Angular - individual, by the date specified on the schedule for your section.
Verify VSCode integration
- We will be using VSCode for the project as it simplifies a lot of the Angular tasks for development and debugging.
- Open the Terminal in VSCode and run: ng serve --open in the directory of where the sample application resides.
- Verify that the sample application opens in a browser.

In-Class Exercises

(UNLESS specifically directed by your instructor)
DO NOT DISREGARD THIS MESSAGE:

It cannot be emphasized enough, the exercises will guide you through "Tour of Heroes" which is a tutorial that is hosted on Angular site under the original version 17.

HOWEVER, you will be doing your project on:
Angular version 20
so be sure to pay attention to the subtle references of setup and configuration. The constructs and platform choices should comply to your instructor's requirements and in some instances that may mean staying away from "bleeding edge". Again, your instructor may only be supporting project executing through:
--no-standalone mode

As always, if in doubt make sure to ask for clarification.

Having setup your local development environment previously, in this activity, you will do the Tour of Heroes app and tutorial which shows you how to develop an application using the Angular CLI tool, and introduces the fundamentals of Angular.

Do only the following steps of the tutorial:

Take a screenshot of the running application and deposit the image in the corresponding myCourses location, Angular Tutorial: Part 1 - individual, by the date specified on the schedule for your section.

document.write(page_topic);

Introduction